<template>
	<custom-page :float="true" title="登录" background-color="transparent" nav-background-color="transparent" borderBottomColor="transparent">
		<template #page>
			<view class="page-content">
				<view class="author-phone-title">其它手机号登录</view>
				<view class="author-phone-tips">未注册的手机号验证通过后将自动注册</view>
				
				<view class="author-phone-input-group">
					<view class="author-phone-input-title">手机号</view>
					<input class="author-phone-input" placeholder="请输入您的手机号" placeholder-class="author-input-holder" type="number" v-model="phone"/>
				</view>
				<view class="author-phone-input-group">
					<view class="author-phone-input-title">验证码</view>
					<input class="author-phone-input" placeholder="请输入验证码" placeholder-class="author-input-holder" type="number" v-model="verifyCode"/>
					<view>
						<vercode-count-down ref="authorCountDown" :value="authorCountDownTime" @start="onAuthorCountDownStart($event)"
							@update="onAuthorCountDownUpdate($event)" @end="onAuthorCountDownEnd($event)">
							<view class="author-phone-verify" v-if="authorCountDownStarting">{{authorCountDownValue}}s后重新获取</view>
							<view class="author-phone-verify"  v-else @click="getVerifyCodeClick($event)">获取验证码</view>
						</vercode-count-down>
					</view>
				</view>
				
				<view :class="['author-phone-submit', {'enable': !vaildPhone}]" @click="loginClick">登录</view>
				
				<view style="flex: 1;"></view>
				<view class="agreement">
					<image class="radio-img" :src="isAgree?asserts.ic_radio_select:asserts.ic_radio_normal" @click="onAgreeChange()"></image>
					<view class="agreement-row" >
						<text>我已阅读并同意</text>
						<text class="agreement-color" @click="toServiceAgreement">《用户服务协议》</text>
						<text>和</text>
						<text class="agreement-color" @click="toPrivacyPolicies">《隐私政策》</text>
						<text>并授权助叫约球获取本机号码</text>
					</view>
				</view>
			</view>
			
		</template>
	</custom-page>
</template>

<script>
	import {
		storageTokenKey, storageUserType
	} from '../../global/config.js'
	import authorAgreementBehavior from '../../behavior/author-agreement-behavior.js'
	export default {
		mixins: [authorAgreementBehavior],
		computed: {
			vaildPhone() {
				let myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})|(17[0-9]{1}))+\d{8})$/;
				if (!this.phone) {
				  return false;
				} else if (this.phone.length < 11) {
				  return false;
				} else if (!myreg.test(this.phone)) {
				  return false;
				} else if (!this.verifyCode) {
				  return false;
				} else {
				  return true
				}
			},
			
		},
		data() {
			return {
				phone: '',
				verifyCode: '',
				authorCountDownStarting: false,
				authorCountDownValue: "",
				authorCountDownTime: 0,
			}
		},
		methods: {
			//点击获取验证码
			getVerifyCodeClick(){
				if (!this.phone) {
					uni.showToast({
						title: "请输入您的手机号"
					})
					return;
				} 
				let params = {
					account: this.phone,
					smsType: 1, 
					smsUse: 1
				}
				this.requestCenter.getSmsCode(params).then(res => {
					uni.showToast({
						title: "验证码发送成功"
					})
					this.authorCountDownTime = 30000
					this.$nextTick(() => {
						this.$refs.authorCountDown.start()
					})
				})
			},
			
			//验证码
			onAuthorCountDownStart: function(event) {
				this.authorCountDownValue = event.detail.value
				this.authorCountDownStarting = true
			},
			onAuthorCountDownUpdate: function(event) {
				this.authorCountDownValue = event.detail.value
			},
			onAuthorCountDownEnd: function(event) {
				this.authorCountDownStarting = false
			},
			
			//点击登录
			loginClick(){
				if(!this.vaildPhone){
					return
				}
				if(!this.isAgree) {
					uni.showToast({
						title: "请阅读并同意用户使用协议及隐私政策"
					})
					return
				}
				let params = {
					account: this.phone,
					loginPlatformType: 2,
					loginMethodType: 5,
					phoneVerificationCode: this.verifyCode
				}
				this.requestCenter.userLogin(params).then(res => {
					let token = res.token || ""
					uni.setStorageSync(storageTokenKey, token || "")
					let userType = uni.getStorageSync(storageUserType)
					if(userType){
						uni.reLaunch({
							url: '/pages/index/index'
						})
					}else{
						uni.navigateTo({
							url: '/pages/author-select-role/author-select-role'
						})
					}
				})
			},
			
			//选择协议切换
			onAgreeChange() {
				this.isAgree = !this.isAgree
			},
			
			//服务协议
			toServiceAgreement: function(event) {
				uni.navigateTo({
					url: "/pages/service-agreement/service-agreement"
				})
			},
			
			//隐私政策
			toPrivacyPolicies: function(event) {
				uni.navigateTo({
					url: "/pages/privacy-policies/privacy-policies"
				})
			},
		}
	}
</script>

<style scoped>
	@import "../../common/author-agreement.css";
	.page-content{
		width: 100%;
		/* #ifndef H5 */
		height: 100%;
		/* #endif */
		/* #ifdef H5 */
		min-height: 100%;
		/* #endif */
		display: flex;
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
		background: linear-gradient(180deg, #F5FFFE 0%, #F9F8FD 100%);
	}
	.author-phone-title{
		font-size: 56rpx;
		color: #021624;
		margin-top: 270rpx;
		margin-left: 56rpx;
		line-height: 48rpx;
	}
	.author-phone-tips{
		font-size: 26rpx;
		color: #585F70;
		margin-top: 20rpx;
		margin-left: 56rpx;
		margin-bottom: 160rpx;
	}
	.author-phone-input-group {
		height: 126rpx;
		margin: 0 56rpx 0 56rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: row;
		align-items: center;
		overflow: hidden;
	}
	.author-phone-input-title{
		font-size: 32rpx;
		color: #021624;
		margin-right: 32rpx;
	}
	.author-phone-verify{
		font-size: 32rpx;
		color: #01CBFF;
	}
	.author-phone-input {
		flex: 1;
		overflow: hidden;
		height: 100%;
		padding: 30rpx 0;
		box-sizing: border-box;
		font-size: 32rpx;
		font-weight: 500;
		line-height: 66rpx;
		color: #000000;
	}
	
	/deep/ .author-input-holder {
		font-size: 32rpx;
		font-weight: 400;
		line-height: 44rpx;
		color: #ABAFB7;
	}
	
	.author-phone-submit {
		margin: 40rpx 56rpx 0 56rpx;
		height: 96rpx;
		background: #01CBFF;
		border-radius: 48rpx;
		box-sizing: border-box;
		text-align: center;
		font-size: 32rpx;
		font-weight: 500;
		line-height: 96rpx;
		color: #FFFFFF;
	}
	
	.author-phone-submit.enable {
		background: rgba(1, 203, 255, 0.2);
	}
	
	.agreement {
		padding: 40rpx 0;
		margin: 0 50rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.agreement-row {
		flex: 1;
		font-size: 24rpx;
		line-height: 40rpx;
		color: #888;
	}
	.agreement-color {
		color: #01CBFF;
		display: inline;
	}
	.radio-img{
		width: 40rpx;
		height: 40rpx;
		margin-right: 16rpx;
	}
	.radio-group-view{
		float: left;
		display: inline;
	}
	.text-row{
		font-size: 24rpx;
		line-height: 40rpx;
		text-align: left;
		color: #888;
	}
	.col-01c{
		color: #01CBFF;
	}
	
	/deep/ radio .wx-radio-input,
	/deep/ radio .uni-radio-input {
		box-sizing: border-box;
	}
	
	/deep/ radio .wx-radio-input-checked,
	/deep/ radio .uni-radio-input-checked {
		background: #01CBFF !important;
		border: none !important;
	}
</style>
